{% load custom_tag %}
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="{% static '/plugins/echart/echarts.min.js' %}"></script>
    <script src="{% static '/bower_components/jquery/dist/jquery.min.js' %}"></script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="echart" style="width:100%;height:400px">

    </div>
    <script>
        var myChart = echarts.init(document.getElementById('echart'));
        myChart.clear()
        $.get("/data/",{}, function(res){
            if(res) {
                var worth = res['worth'];
                var retreat = res['retreat'];
                var date_time = res['date_time'];
                var option = {
                    tooltip: {
                        trigger: 'axis',
                    },
                    color:['#449977', '#00FF00'],
                    legend:{
                        left:'5%',
                        data:['回撤', '净值曲线'],
                        icon: "circle",
                    },
                    dataZoom: [
                        {
                            type:'slider',
                            show: true,
                            realtime: true,
                            start: 0,
                            end: 100,
                            xAxisIndex: [0, 1],
                        },
                        {
                            type: 'inside',
                            realtime: true,
                            start: 0,
                            end: 100,
                            xAxisIndex: [0, 1],
                        }
                    ],
                    xAxis: [
                        {
                            type: 'category',
                            data: date_time,
                            scale: true,
                            gridIndex: 0,
                            name: "retreat"
                        },
                        {
                            data:date_time,
                            gridIndex: 1,
                            name: "worth",
                        },
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            scale: true,
                            gridIndex:0,
                            name:"retreat"
                        },
                        {
                            type: 'value',
                            scale: true,
                            gridIndex:1,
                            name:'worth'
                        }
                    ],
                    grid:[
                        {
                            top:'2%',
                            bottom:'78%',
                            left:'5%'
                        },
                        {
                            top:'28%',
                            bottom:'1%',
                            left:'5%'
                        }
                    ],
                    series: [
                        {
                            xAxisIndex: 0,
                            yAxisIndex: 0,
                            name: '回撤',
                            data: retreat,
                            type: 'bar',
                        },
                        {
                            xAxisIndex: 1,
                            yAxisIndex: 1,
                            name: '净值曲线',
                            data: worth,
                            type: 'line',
                            itemStyle : {
                                normal : {
                                    lineStyle:{
                                        color:'#00FF00'
                                    }
                                }
                            },
                        }
                    ]
                };
                myChart.setOption(option);
            }
        })
    </script>
</body>
</html>